<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UserCenter</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
    <link rel="Shortcut Icon" href="../../images/wangyeicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/bootstrap.css">
    <link rel="stylesheet" href="../../css/font-awesome.min.css">
    <link rel="stylesheet" href="../../css/current.css">
    <link rel="stylesheet" href="../../css/set_model.css">
    <style type="text/css">

    </style>
</head>
<body>
    <!-- 头部导航栏 -->
    <nav class="bg-white  shadow-sm  sticky-top">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar p-3 navbar-expand-lg navbar-light">
                        <a class="navbar-brand" href="#">
                            <img src="../../images/logo1.png" class="img-fluid" style="max-width:80px;" alt="logo">
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse" id="navbarSupportedContent">
                            <ul class="navbar-nav mr-auto">
                                <li class="nav-item active">
                                    <a class="nav-link" href="#">首页 <span class="sr-only">(current)</span></a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-link" href="#">组队广场</a>
                                </li>
                                <li class="nav-item dropdown">
                                    <a class="nav-link" href="#">
                                        活动广场
                                    </a>
                                </li>
                            </ul>
                            <ul class="navbar-nav ml-md-auto">
                                <li class="nav-item dropdown">
                                    <a class="btn btn-outline-primary nav-item  dropdown-toggle mr-md-2" href="#" id="bd-versions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        发起<svg width="1em" height="1em" viewBox="0 0 16 16" class="bi bi-cursor" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                        <path fill-rule="evenodd" d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103zM2.25 8.184l3.897 1.67a.5.5 0 0 1 .262.263l1.67 3.897L12.743 3.52 2.25 8.184z"/>
                                    </svg>
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="bd-versions">
                                        <a class="dropdown-item " href="#">发起组队</a>
                                        <a class="dropdown-item " href="#" target="_blank">发起活动</a>
                                    </div>
                                </li>
                                <li class="nav-item">
                                    <a class="btn btn-primary nav-item" href="#">
                                        消息<span class="badge badge-light ml-2">8</span>
                                            <span class="sr-only">unread messages</span>
                                    </a>
                                </li>
                                <li class="nav-item">
                                    <a class="nav-item  dropdown-toggle mr-md-2" href="#" id="my" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                        <img class="img-fluid rounded-circle pl-2 ml-1" src="../../images/logo.jpg" style="max-width: 50px">
                                    </a>
                                    <div class="dropdown-menu dropdown-menu-md-right" aria-labelledby="my">
                                        <a class="dropdown-item " href="#">我的卡片</a>
                                        <a class="dropdown-item " href="#" target="_blank">个人中心</a>
                                        <div class="dropdown-divider"></div>
                                        <a class="dropdown-item btn btn-primary btn-lg logoff-btn" href="#" data-toggle="modal" data-target="#logoffModal">退出登陆</a>
                                    </div>

                                </li>
                            </ul>

                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </nav>
    <!-- 头像上栏 -->
    <section class="mt-4">
        <div class="container">
            <!-- 用户卡片头部 -->
           <div class="row justify-content-center shadow-sm rounded">
               <div class="col-2">
                   <figure class="figure">
                       <img src="../../images/logo.jpg" class="figure-img img-fluid rounded-circle shadow" style="max-width: 150px" alt="头像">
                       <figcaption class="figure-caption text-center font-weight-bold">NickName<i class="fa fa-mars ml-1 text-primary" aria-hidden="true"></i></figcaption>
                       <figcaption class="text-primary text-center small">@userName</figcaption>
                       <figcaption class="text-info text-center small">18级计算机科学与技术</figcaption>
                   </figure>
               </div>
           </div>
        </div>
    </section>

    <!-- 功能按钮组 -->
    <section class="">
        <div class="container">
            <div class="row justify-content-end ml-5">
                <div class="col-3 d-xl-block d-none" style="margin-top: -40px;">
                    <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-outline-primary"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>点赞<span class="badge badge-light text-muted">9</span></button>
                        <button type="button" class="btn btn-outline-danger"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>举报</button>
                        <button type="button" class="btn btn-outline-info"><i class="fa fa-commenting-o" aria-hidden="true"></i>私信</button>
                    </div>
                </div>
            </div>
            <div class="row justify-content-center mt-2">
                <div class="d-xl-none d-md-block col-8 ml-5 text-center">
                    <div class="btn-group" role="group" aria-label="Basic example">
                        <button type="button" class="btn btn-outline-primary"><i class="fa fa-thumbs-o-up" aria-hidden="true"></i>点赞<span class="badge badge-light text-muted">9</span></button>
                        <button type="button" class="btn btn-outline-danger"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i>举报</button>
                        <button type="button" class="btn btn-outline-info"><i class="fa fa-commenting-o" aria-hidden="true"></i>私信</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- 资料框 -->
    <section class="mt-1">
        <div class="container">
            <div class="row justify-content-center">
                <!-- 基本信息资料框 -->
                <div class="col-sm-12 col-lg-8 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title text-primary font-weight-normal"><i class="fa fa-info text-info mr-2" aria-hidden="true"></i>基本信息</h6>
                            <div class="row">
                                <div class="col-lg-3 col-6 card-text">
                                    <p class="text-muted"><i class="fa fa-smile-o mr-2" aria-hidden="true"></i>姓名:</p>
                                    <p class="text-muted"><i class="fa fa-sort-numeric-asc mr-2" aria-hidden="true"></i>学号:</p>
                                </div>
                                <div class="col-lg-3 col-6 card-text text-right">
                                    <p>某某</p>
                                    <p>181543455</p>
                                </div>
                                <div class="col-lg-3 col-6 card-text text-muted">
                                    <p><i class="fa fa-phone mr-2" aria-hidden="true"></i> 电话：</p>
                                    <p><i class="fa fa-envelope-o mr-2" aria-hidden="true"></i>联系邮箱:</p>
                                </div>
                                <div class="col-lg-3 col-6 card-text text-right">
                                    <p>10086</p>
                                    <p>123@qq.com</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 个人简介 -->
                <div class="col-sm-12 col-lg-8 mt-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title text-primary font-weight-normal"><i class="fa fa-hand-peace-o mr-2" aria-hidden="true"></i>个人简介</h6>
                            <div class="card-text">这人有点怪...</div>
                        </div>
                    </div>
                </div>
                <!-- 个人简介 -->
                <div class="col-sm-12 col-lg-8 mt-3 mb-3">
                    <div class="card">
                        <div class="card-body">
                            <h6 class="card-title text-primary font-weight-normal"><i class="fa fa-car mr-2" aria-hidden="true"></i></i>技能描述</h6>
                            <div class="card-text">吃睡第一名</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 退出登录的模态框 -->
    <div class="modal fade" id="logoffModal" tabindex="-1" role="dialog" aria-labelledby="logoffModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="prompt-text">点击"确定"退出账号</div>
                    <div class="bgimg_lf"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

    <!--引入JQuery,再引入popper.js，最后引入bootstrap.js-->
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/bootstrap.bundle.js"></script>
</body>
</html>